<template>
   <div class="bianj">
    <div class="header">
       <el-input v-model="title" placeholder="请输入标题"></el-input>
    </div>
    <div class="mavonEditor">
    <div>     
    <mavon-editor @change="changeData" class="nossr" 
    :toolbarsBackground="'#cccccc'" 
    :previewBackground="'#fbfbfb'"
    :scrollStyle="true"
      v-model="handbook"
      />
    </div>
    </div>
<div class="footer">
  <el-input type="number" v-model="score" placeholder="悬赏积分"></el-input>
  <div class="tijiao">
    <div class="tj_a">
    <el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
    <i :class="icon"></i>
    <b>{{titles}}</b>
    <span>{{text}}</span>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item v-for="(item,index) in tabledate" :key="index" :command='item'>
      <i :class="item.icon"></i>
    <b>{{item.title}}</b>
    <span>{{item.text}}</span>
    </el-dropdown-item>
  </el-dropdown-menu>
  </el-dropdown>
    </div>
    <div class="tj_a">
    <el-button type="success" @click="btnFabu(texts)">发布</el-button>
    </div>
   
  </div>
</div>
   </div>
</template>
<script>
import API from '@/api/cate'
export default {
name:'fatie',
data(){
    return{
          icon:'el-icon-edit',
          titles:'问题',
          text:'总有一个人知道这个问题的答案',
          tabledate:[{
            icon:'el-icon-s-order',
            title:'帖子',
            text:'分享对别有帮助的经验和见解'
          },{
            icon:'el-icon-edit',
            title:'问题',
            text:'总有一个人知道这个问题的答案'
          },
        {
            icon:'el-icon-video-camera-solid',
            title:'思绪',
            text:'写作过程的记录与重放'
          },
           {
            icon:'el-icon-s-promotion',
            title:'分享',
            text:'与陌生的朋友一起享受你的快乐'
          }
          ],
        title:'',
        score:0,
        handbook: '',
        texts:'',
        defaultData: "preview",
        ff:{
        toolbarsBackground:"#cccccc"
            },
           
    }
},methods:{
  handleCommand(val){
    console.log(val);
    this.icon=val.icon;
    this.titles=val.title;
    this.text=val.text;
  },
   changeData(value, render) {
            this.handbook = render;
            this.texts=render;
        },
        btnFabu(val){
          console.log(val);
          let obj={
        "inviteContent":val,
        "inviteTitle": this.title,
        "type": this.titles,
        "userCode": sessionStorage.getItem("userCode")
          }
            this.$axios
            .post(API.fatie, obj)
            .then(res => {
              if (res.data.responseCode === 200) {   
              this.title='';
              this.score='';
              this.handbook='';
          this.$alert('发布成功', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: res.data.responseMsg
            });
             this.$router.push("/tu1")
          }
        });
              }else{
                  this.$message.error('发帖失败');
              }
            }).catch(error =>{
               this.$message.error('发帖失败');
            })
        }
},
}
</script>

<style scoped>
.bianj{
  width: 100%;
  height: 100%;
}
.mavonEditor {
  width: 100%;
  height: 400px;
}

.header{
  background: rgb(195, 225, 233)
}
.header .el-input{
  width: 100%;
  font-size: 26px;
  height: 10%;
  padding: 3px
}
.footer{
  width: 100%;
  height: 30%;
  padding-bottom: 100px;
  background: rgb(137, 212, 235);
}
.tijiao{
  line-height: 80px;
  height: 80px;
}
.tj_a{
  float: left;
  width: 50%;
}
.el-dropdown-link{
   cursor: pointer; 
   font-size: 18px
}
</style>
<style>
.nossr{
    position: absolute;
    width: 100%; 
    height: 400px;
}
</style>